<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>一言数据库可视化</title>
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>



<div id="yiyan"></div>


<script>
    $.get("./yiyan_data.json", function(res){
            console.log("==>>",res)

            let labels = Object.keys(res);

            let tmpHtml = "";


        let tmpLabel = "";

        for(let l =0, labels_len = labels.length; l<labels_len; l++ ) {

            let tmpLabelHeader = `<h3 style="padding: 0 10px">${labels[l]}&nbsp;<span class="label label-success">${Object.keys(res[labels[l]]).length}</span></h3>`;


            let tmpLabelTable = "";

            for(let n =0, label_len = Object.keys(res[labels[l]]).length; n <label_len; n++){

                let tmp_key = Object.keys(res[labels[l]])[n];

                tmpLabelTable += `<li class="list-group-item">${res[labels[l]][tmp_key]["hitokoto"]}<span class="badge" style="float: none">${res[labels[l]][tmp_key]["from"]}</span></li>`;

            }

            tmpLabelTable = `<ul class="list-group">${tmpLabelTable}</ul>`
            tmpLabel += tmpLabelHeader;
            tmpLabel += tmpLabelTable;
        }

        tmpHtml = tmpLabel



        $("#yiyan").html(tmpHtml);

        }
    )
</script>

<script>
    var _hmt = _hmt || [];
    (function() {
      var hm = document.createElement("script");
      hm.src = "https://hm.baidu.com/hm.js?34564f2837e4e2fb61052ac26a09b689";
      var s = document.getElementsByTagName("script")[0]; 
      s.parentNode.insertBefore(hm, s);
    })();
</script>
    

</body>
</html>